<script setup lang="ts">
defineProps({
  data: {
    type: Object,
    request: true
  }
})


const emit = defineEmits(['preview'])

const previewInform = (dataToSend) => {
  emit('preview', dataToSend)
  console.log(dataToSend, 'mdaf')
}

</script>

<template>
  <div class="inform">
    <a-badge :count="data!.count">
      <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.spU0caxiIG4FDQovbenUFgHaFj?rs=1&pid=ImgDetMain" alt="">
    </a-badge>
    <div class="content">
      <p class="title"><span>{{ data!.text }}</span>{{ data!.message }}</p>
      <span class="time">{{ data!.time }}</span>
    </div>
    <a-button type="primary" @click="previewInform(data)">查看</a-button>
  </div>
</template>



<style scoped lang="scss">
.inform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  cursor: pointer;
  border: .0625rem solid #f0f0f0;

  img {
    width: 3.125rem;
    height: 3.125rem;
    object-fit: cover;
    border-radius: 50%;
  }

  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 .9375rem 0 .625rem;

    .title {
      margin-bottom: .625rem;
      font-size: .75rem;
    }

    .time {
      font-size: .625rem;
      color: #999;
    }
  }
}

.inform:hover {
  background-color: #fdfdfd;
}

@media screen and (width <=48rem) {
  p {
    height: 2rem;
    overflow: hidden;
    font-size: .5rem;
    white-space: wrap;
  }
}

@media screen and (width <=30rem) {
  img {
    display: none;
  }
}
</style>
